vue-quill-editor custom button base64 to imgUrl

　　The vue-quill-editor rich text editor is used in the project
Brief introduction:
　　Quill based, rich text editor for Vue2 supports server-side rendering and single page applications.
Demo Page
Sum up:
　　1. in general, simple and easy to use.
　　2. you can customize the Option toolbar looks good to use

　　But the pictures used in the project were uploaded. Use this plugin directly. There was no problem. But the backstage couldn’t stand it, and the pictures were encoded by base64. Background pictures are limited. Helpless, just want to solve the problem. Fortunately, the background provides an interface, the picture to URL, so good, first the picture to URL, in the rich text editor inside it is not OK?.

　　The reason is so simple, practice is really another matter.

容我装逼一把，哈哈，中文用户还是看下面吧。

　　项目中使用了 vue-quill-editor 富文本编辑器
简介：
　　基于Quill、适用于Vue2的富文本编辑器，支持服务端渲染和单页应用。
Demo Page
总结：
　　1.总的来说简洁好用。
　　2.可以自定义Option toolbar貌似很好用的样子

　　但是项目中使用到了图片上传。直接使用这个插件。完全没问题。但是后台受不了了，传过去的图片是base64编码。后台图片做了限制。无奈只好想办法解决呗。好在后台提供了个接口，将图片转为URL，这样好啊，先把图片转为URL，在放到富文本编辑器里面不就行了吗。

　　道理是这么简单，实践确是另一回事。

问题一 怎么添加自定义的button。

　　demo中也提供了。

1
<button type="button" @click="customButtonClick">img</button>

什么 img 太丑了，那就是用字符图标(Glyphicons 字体图标)

1
<button type="button" @click="customButtonClick"><i class="glyphicon glyphicon glyphicon-picture"></i></button>

问题二 怎么打开file 选择图片。

　　这个一开始想着是自定义个
　　图标太丑。
　　class=”ql-image” 放在上面button中 虽然好看，可以打开获取图片，但是还是base64不走自定义方法。放在input中没卵用。

　　该怎么实现那，其实也不难

1
<input type="file" class="custom-input" @change='upload' style='display: none !important;'>

　　直接放个隐形的input就解决了。貌似很牛逼的样子

　　然后在 upload中写方法 调接口实现 Base64到url 的完美过度

##最后才是重点：
——————————————分割线——————————————————-
以下仅做参考

问题三 获取到了imgUrl后怎么插入到文档中。

　　最开始参考的是这位仁兄的回答
　　但是放到customButton中是获取不到 this.$refs.myTextEditor.quillEditor更别说.getSelection();这个方法了。
　　因为自定义的按钮是获取不到 quill 的。
　　这个方法放到

1
2
3
4
5
   onEditorChange({editor, html, text}) {
//        console.log('editor change!', editor)
         console.log('editor change!', editor.getSelection())
      },
这样是好用的

　　那我该怎么办那 马丹 自己太机智了，有点投机取巧的做法

放大招了直接上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<quill-editor ref="myTextEditor"
                          v-model="content"
                          :options="editorOption"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)"
            >
              <div id="toolbar" slot="toolbar">
                <button class="ql-bold">Bold</button>
                <button class="ql-italic">Italic</button>
                <select class="ql-size">
                  <option value="small"></option>
                  <option selected></option>
                  <option value="large"></option>
                  <option value="huge"></option>
                </select>
                <!-- Add subscript and superscript buttons -->
                <!--<button type="button" class="ql-image"></button>-->
                <button type="button" @click="customButtonClick">img</button>
                <input type="file" class="custom-input" @change='upload' style='display: none !important;'>
              </div>
            </quill-editor>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
    data(){
      return {
        length: '',
        editor: {},
        editorOption: {
          modules: {
          //  imageImport: true,
          //  imageResize: {
          //    displaySize: true
         //   },
            toolbar: '#toolbar',
          }
        },
      }
  }
  methods: {
      onEditorFocus(editor) {
        this.editor = editor   //当content获取到焦点的时候就 存储editor
      },
      onEditorReady(editor) {
        this.editor = editor //当quill实例化完先 存储editor
      },

      customButtonClick(){
        var range
        if (this.editor.getSelection() != null) {
          range = this.editor.getSelection()
          this.length = range.index  //content获取到焦点，计算光标所在位置，目的为了在该位置插入img
        } else {
          this.length = this.content.length  //content没有获取到焦点时候 目的是为了在content末尾插入img
        }
        this.$el.querySelector('.custom-input').click();   //打开file 选择图片
      },


   upload(event){
        var reader = new FileReader();
        var img1 = event.target.files[0];
        reader.readAsDataURL(img1);
        var that = this;
        reader.onloadend = function () {
          //上传图片
          that.pushImg(reader.result, 1)
        }
      },

   pushImg(base64, type){
        let self = this
        var json = {data: [{id: 0, content: base64}]}
        api.pushImgToGeturl(json).then(function (res) { //这一块可以忽略知识调接口获取到 imgurl
          if (res.data.success) {
              self.contentImg = res.data.data[0].url.url    //获取到了图片的URL
              console.log(self.contentImg)
              self.editor.insertEmbed(self.length, 'image', self.contentImg); // ★这里才是重点★ 插入到content中
          }
        })
      }
}

完事。
有什么问题可以共同探讨。
或者有更好的方法，请告知，谢了。知识在于分享

最后翻阅了 那么多issues
最大的感触是，英语是硬伤啊，学好英语是编程的基础啊。

——————————————分割线——————————————————-

这才是重点中的重点

这个问题GitHub上已经做了修改。
所以说以上代码就不用那么繁琐了。仅做参考就行。

1
2
3
4
5
6
    computed: {
      editor() {
        return this.$refs.myTextEditor.quill
      }
    },
//应该是quill，而非quillEditor

这样就可以在 customButtonClick中获取到

1
2
3
customButtonClick(){
  console.log(this.editor)
},

感谢@上善若水_3cd7的提醒。

1
2
3
var range = self.editor.getSelection(true);
var  length = range.index
self.editor.insertEmbed(length, 'image', self.contentImg);

这样就不需要土办法了[捂脸]。直接在文中添加图片。而不需判断range.index

ok 感谢各位大神

路漫漫其修远兮吾将上下而求索的出处